<template>
  <el-container style="height: 100%">
    <el-header height="70px">
      <el-row :gutter="10">
        <el-col :span="8" class="header-font header-font-name">
          <span style="font-size: 60px">邬</span>
          <span><sub>魉</sub></span>
        </el-col>
        <el-col :offset="14" :span="2" class="header-font header-font-name">
          <wl-current-time/>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <wl-menu/>
      </el-aside>
      <el-main class="wl-main">
        <el-container>
          <el-header height="20px">
          </el-header>
          <el-main>
            <div style="font-size: 40px">
              <wl-table
                  :labelList="schemaLabelList"
                  :deleteURL="'/api/datasource/datasourceSchema/deleteOne'"
                  :initDataUrl="'/api/datasource/datasourceSchema/findPageByKeywords'"
              />
            </div>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import wlTable from '@/components/WLTable'
import WlCurrentTime from "@/components/WLCurrentTime";
import WlMenu from "@/components/WLMenu";

export default {
  name: "index",
  components: {WlMenu, WlCurrentTime, wlTable},
  mounted() {
    this.getMenuList()
    this.getSchemaList()
    // if (!sessionStorage.getItem("token")) {
    //   this.$router.push("/login")
    // }
  },
  data() {
    return {
      pageable: {},
      currentTime: new Date(),
      schemaList: [],
      menuList: [],
      schemaLabelList: [
        {fieldName: "schemaName", fieldLabel: "数据库名称"},
        {fieldName: "createTime", fieldLabel: "创建时间"},
        {fieldName: "schemaCharter", fieldLabel: "数据库编码"},
        {fieldName: "schemaCollate", fieldLabel: "数据库引擎"}
      ],
    }
  },
  methods: {
    getMenuList() {
      let that = this;
      this.$request.get('/api/system/menu/listAll').then(res => {
        that.menuList = res.content;
      })
    },
    getSchemaList() {
      let that = this
      this.$request.post('/api/datasource/datasourceSchema/findPageByKeywords', {
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        that.schemaList = res.content
        that.pageable = res.pageable
        that.pageable['totalPages'] = res.totalPages
      })
    },
  }
}
</script>

<style>
.wl-main {
  background-image: linear-gradient(rgba(31, 42, 64, 1) 15%, rgb(63, 85, 130) 70%, rgb(100, 136, 206));
  overflow: hidden;
}

.el-header {
  margin-bottom: 10px;
}

.header-font {
  font-size: 35px;
  font-family: 'Adobe 宋体 Std L', cursive;
  text-align: left;
  color: rgb(232, 228, 228);
}

.wu-login-login-time {
  height: 100%;
  font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
  font-size: 20px;
  color: snow;
  margin-top: 20%;
  /*color: rgba(0, 255, 234, 0.89);*/
}

.wl-header-tag:hover {
  color: white;
}

.wl-header-tag > i[class*='el-tag__close']:hover {
  background-color: #83a8f1 !important;
}

.wl-header-tag[class*='action'] {
  border: 2px solid #83a8f1 !important;
}

.wl-header-tag {
  background-color: #3e537f !important;
  border: none;
}

.wl-table {
  background-color: rgba(0, 0, 0, 0);
  border-bottom: none;
}

.wl-table > .el-table__body-wrapper {
  border-bottom: none;
}

.wl-table-header > th {
  background-color: rgba(60, 115, 130, 0.3);
  color: #777;
  text-align: center;
}

.wl-table-row {
  color: black;
  height: 80px !important;
}

.wl-table-row[class*='el-table__row--striped'] > td {
  background-color: rgb(197, 219, 224) !important;
}

.wl-table-row[class*='el-table__row--striped']:hover {
  background-color: #fff !important;
}

.wl-table-row > td {
  background-color: rgb(220, 242, 247);
  text-align: center;
}
</style>
